<template>
    <div class="container">
        <div class="container-header">{{$st('Order_No')}}：{{ repairId }}</div>
        <van-divider style="margin: 0px" />
        <van-form @submit="onSubmit">
            <div class="eval-rate">

                <rate-group
                    :labelMarginRight="20"
                    :itemSize="27"
                    :fontSize="15"
                    :canExpand="false"
                    :rateProps="ratesetprops"
                    v-model="evaldata"
                >
                </rate-group>
            </div>

            <div class="eval-remark">
                <div class="eval-remark-title">{{$st('evaluate')}}</div>
                <van-field
                    class="eval-remark-text"
                    :label-width="0"
                    maxlength="200"
                    :rules="rules.remark"
                    v-model="evaldata.remark"
                    rows="5"
                    autosize
                    type="textarea"
                    :placeholder="$st('wp_Please_write_down_your_comment_within_200_words')"
                />
            </div>

            <div class="container-button">
                <van-button
                    round
                    native-type="submit"
                    class="button"
                    type="primary">{{$st('submit')}}</van-button>
            </div>
        </van-form>
    </div>
</template>

<script lang="js">
import { reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import Cookies from 'js-cookie';
import { showError } from '@/util/MessageDeal.js';
import { selfI18n } from '@/i18n/index';
import RateGroup from '@/components/_common/RateGroup.vue';
import { getUserRepairSetup } from '@/setup/repairworkordertouser/RepairOrderUserSetup';
export default {
    name: '',
    components: { RateGroup },
    props: {
        repairId: String,
        repairPhone: String
    },
    setup (props, context) {
        const router = useRouter();
        const $st = selfI18n;
        const { PostRepairReview } = getUserRepairSetup();
        const type = Cookies.get('setquerytype');
        const state = reactive({
            evaldata: {
                repairid: props.repairId,
                remark: '',
                phone: type === 'phone' ? Cookies.get('repairphone') : Cookies.get('phone'),
                vercode: type === 'phone' ? Cookies.get('queryvercode') : Cookies.get('vercode')
            },
            rules: {
                remark: [
                    { required: true, message: $st('wp_Please_fill_in_the_evaluation'), trigger: 'change' }
                ]
            },
            ratesetprops: [
                {
                    id: 'overallevaluation',
                    label: $st('wp_Overall_evaluation')
                },
                {
                    id: 'replyspeed',
                    label: $st('wp_Responding_speed')
                },
                {
                    id: 'repairspeed',
                    label: $st('wp_Maintenance_quality')
                },
                {
                    id: 'serviceattitude',
                    label: $st('wp_Service_attitude')
                }
            ]
        });
        for (const item of state.ratesetprops) {
            state.evaldata[item.id] = 0;
        }
        const goto = (page, params) => {
            router.push({
                replace: true,
                name: page,
                params
            });
        };
        console.log(state.evaldata);
        const onSubmit = () => {
            if (state.evaldata.phone === '') {
                showError($st('wp_Please_log_in_or_use_your_mobile_phone_number_to_inquire_for_repairs_grogress_and_make_your_evaluation'));
                return;
            }
            if ((!state.evaldata.overallevaluation ||
                 !state.evaldata.replyspeed ||
                 !state.evaldata.repairspeed ||
                 !state.evaldata.serviceattitude)) {
                showError('请完善打分项!');
                return;
            }
            PostRepairReview(state.evaldata, () => {
                goto('RateSuccess', { repairId: props.repairId });
                // this.router.push(`/userhome/searchrepairresult?manufacturecode=${this.$route.query.manufacturecode}&&querytype=${Cookies.get('setquerytype')}`);
            });
        };
        return {
            onSubmit,

            ...toRefs(state)
        };
    }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;

  font-weight: Normal;
  text-align: LEFT;
}
.container-header {
  font-size: 17px;
  padding: 15px;
  background-color: white;
}
.eval-remark {
  font-size: 15px;
  background-color: white;
}
.eval-remark-title {
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
}
.eval-remark-text {
  padding: 0px 15px 15px 15px;
  border: 0;
  width: 100%;
}
.eval-rate {
  background-color: white;
  padding:10px ;

}
.container-button {
  margin: 20px 5px 0px 5px;
  display: flex;
  justify-content: space-around;
}
.button {
  width: 180px;
  height: 35px;
}
</style>
